<template>
	<div class="rk-aside-tree-wrapper">
		<div class="aside-tree-item">
			<div class="tree-item-search panel-header-graduabg-color">
				<div class="item-search-title" v-show="showTitle">
					<span>{{ treeTitle }}</span>
				</div>
				<div class="item-search-content">
					<el-input v-model="filterText" :placeholder="placeholder" :prefix-icon="Search" clearable />
				</div>
			</div>
			<div class="tree-item-content" v-loading="loading">
				<div class="tree-item-content-center">
					<el-tree
						ref="asideTreeRef"
						highlight-current
						:data="sTreeData"
						:props="sTreeProps"
						:node-key="sTreeProps.value"
						:current-node-key="currentNodeKey"
						:filter-node-method="handleFilter"
						:default-expand-all="expandAll"
						:expand-on-click-node="expandOnClickNode"
						:default-expanded-keys="defaultExpandedKeys"
						@node-click="handleNodeClick"
						@node-expand="handleExpand"
						@node-collapse="handleCollapse"
						@current-change="handleNodeChange"
					>
					</el-tree>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { useTreePanelCommonProps, useTreePanelOperateHook } from '@/hooks';

const emits = defineEmits(['nodeClick', 'currentChange']);
const props = defineProps({ ...useTreePanelCommonProps });

const {
	loading,
	sTreeData,
	filterText,
	sTreeProps,
	asideTreeRef,
	currentNodeKey,
	defaultExpandedKeys,

	loadTree,
	handleFilter,
	handleExpand,
	handleCollapse,
	handleNodeClick,
	handleNodeChange,
} = useTreePanelOperateHook({ props, emits });

loadTree();
</script>

<style lang="scss" scoped></style>
